<template>
	<view class="content">
		<u-navbar bgColor="#F5F9FC" :placeholder="true" :autoBack="true"></u-navbar>

		<view class="top-box">
			<view class="img-bg">
				<image src="../../static/images/authentication.png"></image>
			</view>
			<view class="title">绑定公司</view>
		</view>

		<view class="form-box">
			<view class="type-box">
				<view class="bg-color">
					<view class="bg-item" style="background: rgba(65, 136, 239, 1);"></view>
					<view class="bg-item" style="background: #fff;"></view>
				</view>
				<view class="type-btn">
					<view :class="type == 'bindcode'? 'bindcode-click' : 'bindcode'" @click="type = 'bindcode'">绑定码绑定
					</view>
					<view :class="type == 'legal'? 'legal-click' : 'legal'" @click="type = 'legal'">法人手机号绑定</view>
				</view>
			</view>

			<view v-show="type == 'legal'">
				<view style="height: 40rpx;"></view>

				<view>
					<u--form labelPosition="top" :model="addForm" labelWidth="auto" ref="addForm">
						<u-form-item prop="realName">
							<view class="input-label">
								<span>请输入</span>
								<span class="blue">法人</span>
								<span>真实姓名</span>
							</view>
							<u--input v-model="addForm.realName" type="text" placeholder="真实姓名"
								placeholderClass="input-placeholder" :customStyle="inputStyle"></u--input>
						</u-form-item>
						<u-form-item prop="phone">
							<view class="input-label">
								<span>请输入</span>
								<span class="blue">法人</span>
								<span>实名的手机号</span>
							</view>
							<u--input v-model="addForm.phone" type="number" placeholder="手机号码"
								placeholderClass="input-placeholder" :customStyle="inputStyle"></u--input>
						</u-form-item>
						<u-form-item prop="code">
							<view class="input-label">
								<span>请输入短信验证码</span>
							</view>
							<u-input v-model="addForm.code" type="number" placeholder="验证码"
								placeholderClass="input-placeholder" :customStyle="inputStyle">
								<template slot="suffix">
									<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
									<view @tap="getCode" style="color: rgba(65, 136, 239, 1);font-size: 26rpx;">
										{{ tips }}
									</view>
								</template>
							</u-input>
						</u-form-item>
						<view class="btn" @click="toAdd()">立即验证</view>
					</u--form>
				</view>
				<view class="binding-btn" @click="toPage('/pages/company/addcustom')">自定义添加</view>

				<view style="height: 60rpx;"></view>
			</view>

			<view v-show="type == 'bindcode'">
				<u--form labelPosition="top" :model="bindForm" labelWidth="auto" ref="bindForm">
					<view style="height: 40rpx;"></view>
					<u-form-item prop="bindingCode">
						<view class="input-label">
							<span>请输入绑定码</span>
						</view>
						<u--input v-model="bindForm.bindingCode" type="text" placeholder="绑定码"
							placeholderClass="input-placeholder" :customStyle="inputStyle"></u--input>
					</u-form-item>
					<view class="btn" @click="binding()">立即绑定</view>
					<view style="height: 60rpx;"></view>
				</u--form>
			</view>

			<uni-popup ref="popup" type="center" @maskClick="closePop()">
				<view class="pop">
					<view class="top-box">
						<image src="../../static/images/left.png" @click="closePop()"></image>
						<view>验证成功!</view>
						<view></view>
					</view>
					<view>
						<view class="info-card">
							<image src="../../static/images/legal.png"></image>
							<view class="right-box">
								<view class="top">
									<view class="name">{{ addForm.realName }}</view>
									<view class="phone">({{ addForm.phone }})</view>
								</view>
								<view class="bottom">
									<text>旗下</text>
									<text class="num">{{ companyList.length }}</text>
									<text>家公司</text>
								</view>
							</view>
						</view>
						<view class="choose-box">
							<view>请选择要绑定的公司:</view>
							<view :class="isSelectAll? 'selected' : 'select-btn'" @click="selectAll()">全选</view>
						</view>
						<scroll-view scroll-y style="height: 470rpx;">
							<view :class="item.status? 'company-select' : 'company'"
								v-for="(item, index) in companyList" :key="index" @click="selectCompany(item ,index)">
								<view class="name" v-if="!item.isBind">{{ item.companyName }}</view>
								<view class="name-binding" v-if="item.isBind">{{ item.companyName }}</view>
								<view class="scale">{{ item.scale }}</view>
								<view class="isBinding" v-if="item.isBind">已绑定</view>
							</view>
						</scroll-view>
						<view class="binding-btn" @click="bindingMore()" v-if="selectNum != 0">已选 {{ selectNum }} 家，确认绑定
						</view>
						<view class="binding-none" v-if="selectNum == 0">确认绑定</view>
					</view>
					<view style="height: 50rpx;"></view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		bindingApi,
		firstBindingApi,
		sendLegalBindingMsgApi,
		batchBindingApi,
		batchBindingSaveApi,
	} from "@/api/auth.js"
	export default {
		data() {
			return {
				addForm: {
					realName: '',
					code: '',
					phone: '',
				},
				bindForm: {
					bindingCode: ''
				},
				rules: {
					'realName': {
						type: 'string',
						required: true,
						message: '请填写真实姓名',
						trigger: ['blur']
					},
					'code': {
						required: true,
						message: '请输入验证码',
						trigger: ['blur'],
					},
					'phone': [{
							required: true,
							message: '请输入手机号',
							trigger: ['blur'],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['blur'],
						}
					]
				},
				bindrules: {
					'bindingCode': {
						type: 'string',
						required: true,
						message: '请填写绑定码',
						trigger: ['blur']
					}
				},
				type: 'legal',
				tips: '',
				isSelectAll: false,
				isBinding: false,
				companyList: [],
				scaleList: [{
						value: '0',
						label: '个人独资'
					},
					{
						value: '1',
						label: '小规模'
					},
					{
						value: '2',
						label: '一般纳税人'
					},
					{
						value: '3',
						label: '个体工商户'
					},
					{
						value: '4',
						label: '其他企业'
					},
				],
				selectNum: 0,
			}
		},
		onShow() {
			this.isBinding = uni.getStorageSync('isBinding')
		},
		methods: {
			toPage(URL) {
				uni.navigateTo({
					url: URL
				})
			},
			closePop() {
				this.$refs.popup.close()
			},
			toAdd() {
				this.$refs.addForm.validate().then(res => {
					this.getCompany()
				}).catch(errors => {
					uni.$u.toast('请将信息填写完整')
					console.log(errors);
				})
			},
			bindingMore() {
				const ids = []
				this.companyList.forEach(item => {
					if (item.status) {
						ids.push(item.id)
					}
				})
				batchBindingSaveApi(ids, !this.isBinding).then(res => {
					if (res.code == 200) {
						uni.navigateBack()
					} else {
						uni.$u.toast(res.msg);
					}
				})
			},
			selectAll() {
				this.isSelectAll = !this.isSelectAll
				this.selectNum = 0
				if (this.isSelectAll) {
					this.companyList.forEach(item => {
						if (!item.isBind) {
							item.status = true
							this.selectNum++
						}
					})
				} else {
					this.companyList.forEach(item => {
						item.status = false
					})
				}
			},
			selectCompany(data, id) {
				if (!data.isBind) {
					this.companyList[id].status = !this.companyList[id].status
					let isAllSelect = true
					this.selectNum = 0
					this.companyList.forEach(item => {
						if (!item.isBind) {
							if (!item.status) {
								isAllSelect = false
							} else {
								this.selectNum++
							}
						}
					})
					if (isAllSelect) {
						this.isSelectAll = true
					} else {
						this.isSelectAll = false
					}
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				const phonePattern = /^1[3456789]\d{9}$/;
				if (this.addForm.phone == "") {
					uni.$u.toast('请输入手机号');
				} else if (phonePattern.test(this.addForm.phone)) {
					if (this.$refs.uCode.canGetCode) {
						/* uni.showLoading({
							title: '正在获取验证码',
							mask: true
						}) */
						sendLegalBindingMsgApi(this.addForm.phone).then(res => {
							if (res.code == 200) {
								uni.hideLoading();
								uni.$u.toast('验证码已发送');
								this.$refs.uCode.start();
							} else {
								uni.$u.toast(res.msg);
								uni.hideLoading();
							}
						})
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				} else {
					uni.$u.toast('请输入正确的手机号');
				}
			},
			getCompany() {
				batchBindingApi(this.addForm).then(res => {
					if (res.code == 200) {
						console.log(res)
						if (res.data.companyList) {
							this.companyList = res.data.companyList.map(item => {
								const newItem = {
									...item
								}
								const scale = this.scaleList.find(data => item.scale == data.value)
								// newItem.scale = scale.label || '暂无'
								newItem.scale = scale ? scale.label : '暂无';
								newItem.status = false
								return newItem
							})
							const list = []
							this.companyList.forEach((item, index) => {
								if (item.isBind) {
									let companyInfo = this.companyList.splice(index, 1)[0];
									list.push(companyInfo)
								}
							})
							list.forEach(item => {
								this.companyList.push(item)
							})
						}
						this.$refs.popup.open()
					} else {
						uni.$u.toast(res.msg)
					}
				})
			},
			binding() {
				this.$refs.bindForm.validate().then(res => {
					if (this.isBinding) {
						bindingApi(this.bindForm.bindingCode).then(res => {
							if (res.code == 200) {
								uni.$u.toast('绑定成功')
								uni.navigateBack()
							} else {
								uni.$u.toast(res.msg)
							}
						})
					} else {
						firstBindingApi(this.bindForm.bindingCode).then(res => {
							if (res.code == 200) {
								uni.setStorageSync('isBinding', true)
								uni.$u.toast('绑定成功')
								uni.navigateBack()
							} else {
								uni.$u.toast(res.msg)
							}
						})
					}
				}).catch(errors => {
					uni.$u.toast('请填写绑定码')
				})
			},
		},
		computed: {
			inputStyle() {
				const style = {
					'font-size': '28rpx',
					border: '4rpx solid rgba(65, 136, 239, 1) !important',
					background: ' rgba(245, 249, 252, 1)',
				}
				return style
			}
		},
		onReady() {
			this.$refs.addForm.setRules(this.rules)
			this.$refs.bindForm.setRules(this.bindrules)
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		.top-box {
			margin-top: 18rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.img-bg {
				width: 48rpx;
				height: 48rpx;
				border-radius: 12rpx;
				background: rgba(65, 136, 239, 1);
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 28rpx;
					height: 28rpx;
				}
			}

			.title {
				color: rgba(86, 143, 225, 1);
				font-size: 36rpx;
				font-weight: 700;
				margin-left: 16rpx;
			}
		}

		.form-box {
			width: calc(100% - 60rpx);
			height: auto;
			border-radius: 30rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
			padding: 0 30rpx;
			margin-top: 94rpx;

			.type-box {
				width: calc(100% + 60rpx);
				height: 90rpx;
				border-radius: 30rpx 30rpx 0 0;
				position: relative;
				margin: -30rpx;

				.bg-color {
					width: 100%;
					height: 100%;
					border-radius: 30rpx 30rpx 0 0;
					position: absolute;

					.bg-item {
						width: 100%;
						height: 50%;
						border-radius: 30rpx 30rpx 0 0;
					}
				}

				.type-btn {
					width: 100%;
					height: 100%;
					position: absolute;
					display: flex;
					font-size: 28rpx;
					font-weight: 700;
					letter-spacing: 2rpx;
					text-align: center;

					.bindcode {
						width: calc(50% + 20rpx);
						height: 90rpx;
						line-height: 90rpx;
						border-radius: 30rpx 30rpx 40rpx 0;
						background: rgba(65, 136, 239, 1);
						color: #fff;
					}

					.legal {
						width: calc(50% + 20rpx);
						height: 90rpx;
						line-height: 90rpx;
						border-radius: 30rpx 30rpx 0rpx 40rpx;
						background: rgba(65, 136, 239, 1);
						color: #fff;
					}

					.bindcode-click {
						width: calc(50% - 20rpx);
						height: 90rpx;
						line-height: 90rpx;
						border-radius: 30rpx 30rpx 30rpx 0;
						background: #fff;
						color: rgba(51, 51, 51, 1);
					}

					.legal-click {
						width: calc(50% - 20rpx);
						height: 90rpx;
						line-height: 90rpx;
						border-radius: 30rpx 30rpx 0rpx 30rpx;
						background: #fff;
						color: rgba(51, 51, 51, 1);
					}
				}
			}

			::v-deep .input-placeholder {
				color: #ccc;
				font-size: 28rpx;
			}

			.info-card {
				width: calc(100% - 28rpx);
				height: 146rpx;
				border-radius: 12rpx;
				background: rgba(245, 249, 252, 1);
				margin-top: 40rpx;
				padding-left: 28rpx;
				display: flex;
				align-items: center;

				image {
					width: 110rpx;
					height: 116rpx;
					margin: -10rpx 34rpx 0 0;
				}

				.right-box {
					.top {
						display: flex;
						margin-bottom: 20rpx;

						.name {
							font-size: 30rpx;
							font-weight: 700;
							left: 2rpx;
							color: rgba(51, 51, 51, 1);
							margin-right: 10rpx;
						}

						.phone {
							font-size: 26rpx;
							left: 2rpx;
							color: rgba(51, 51, 51, 1);
							margin-top: 2rpx;
						}
					}

					.bottom {
						font-size: 22rpx;
						letter-spacing: 2rpx;
						color: rgba(128, 128, 128, 1);

						.num {
							color: rgba(65, 136, 239, 1);
							font-size: 26rpx;
							margin: 0 8rpx;
						}
					}
				}
			}

			.choose-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: rgba(128, 128, 128, 1);
				font-size: 26rpx;
				letter-spacing: 2rpx;
				margin: 30rpx 0 22rpx 0;

				.select-btn {
					width: 110rpx;
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 6rpx;
					background: rgba(65, 136, 239, 1);
					font-size: 24rpx;
					color: #fff;
					text-align: center;
				}

				.selected {
					width: 106rpx;
					height: 46rpx;
					line-height: 46rpx;
					border-radius: 6rpx;
					background: rgba(235, 246, 255, 1);
					border: 2rpx solid rgba(65, 136, 239, 1);
					color: rgba(65, 136, 239, 1);
					font-size: 24rpx;
					text-align: center;
				}
			}

			.company {
				width: calc(100% - 36rpx);
				height: 100rpx;
				border-radius: 6rpx;
				background: rgba(245, 249, 252, 1);
				padding-left: 36rpx;
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
			}

			.company-select {
				width: calc(100% - 40rpx);
				height: 96rpx;
				border-radius: 6rpx;
				background: rgba(245, 249, 252, 1);
				padding-left: 36rpx;
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				border: 2rpx solid rgba(65, 136, 239, 1);
			}

			.name {
				font-size: 28rpx;
				letter-spacing: 2rpx;
				color: rgba(51, 51, 51, 1);
				max-width: calc(100% - 160rpx);
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.scale {
				padding: 4rpx 10rpx;
				border-radius: 4rpx;
				background: linear-gradient(224.81deg, rgba(109, 169, 237, 0.49) 0%, rgba(107, 200, 250, 0.38) 100%);
				font-size: 18rpx;
				letter-spacing: 2rpx;
				color: rgba(65, 136, 239, 1);
				margin-left: 10rpx;
			}

			.binding-btn {
				width: 570rpx;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 20rpx;
				background: rgba(65, 136, 239, 1);
				box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.08), 0rpx 2rpx 8rpx rgba(65, 136, 239, 0.25);
				margin: 60rpx auto 0 auto;
				text-align: center;
				font-size: 30rpx;
				letter-spacing: 2rpx;
				color: #fff;
			}

			.binding-none {
				width: 570rpx;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 20rpx;
				background: rgba(65, 136, 239, 0.5);
				box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.08), 0rpx 2rpx 8rpx rgba(65, 136, 239, 0.25);
				margin: 60rpx auto 0 auto;
				text-align: center;
				font-size: 30rpx;
				letter-spacing: 2rpx;
				color: #fff;
			}

			.input-label {
				color: rgb(128, 128, 128);
				font-size: 28rpx;
				margin: 10rpx 0 24rpx 0;

				.blue {
					color: rgba(65, 136, 239, 1);
					font-weight: 700;
					margin: 0 8rpx;
				}
			}

			.btn {
				width: 570rpx;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 20rpx;
				background: rgba(65, 136, 239, 1);
				box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.08), 0rpx 2rpx 8rpx rgba(65, 136, 239, 0.25);
				margin: 50rpx auto 0 auto;
				text-align: center;
				font-size: 300;
				color: #fff;
			}
		}

		.pop {
			width: calc(100%);
			height: auto;
			border-radius: 30rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
			padding: 0 30rpx;
			margin-left: -30rpx;

			.top-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 28rpx;
				width: calc(100% + 4rpx);
				height: 100rpx;
				border-radius: 30rpx 30rpx 0 0;
				background: rgba(65, 136, 239, 1);
				margin-left: -30rpx;
				font-size: 32rpx;
				letter-spacing: 4rpx;
				font-weight: 700;
				color: #fff;

				image {
					width: 36rpx;
					height: 24rpx;
				}
			}

			.info-card {
				width: calc(100% - 28rpx);
				height: 146rpx;
				border-radius: 12rpx;
				background: rgba(245, 249, 252, 1);
				margin-top: 40rpx;
				padding-left: 28rpx;
				display: flex;
				align-items: center;

				image {
					width: 110rpx;
					height: 116rpx;
					margin: -10rpx 34rpx 0 0;
				}

				.right-box {
					.top {
						display: flex;
						margin-bottom: 20rpx;

						.name {
							font-size: 30rpx;
							font-weight: 700;
							left: 2rpx;
							color: rgba(51, 51, 51, 1);
							margin-right: 10rpx;
						}

						.phone {
							font-size: 26rpx;
							left: 2rpx;
							color: rgba(51, 51, 51, 1);
							margin-top: 2rpx;
						}
					}

					.bottom {
						font-size: 22rpx;
						letter-spacing: 2rpx;
						color: rgba(128, 128, 128, 1);

						.num {
							color: rgba(65, 136, 239, 1);
							font-size: 26rpx;
							margin: 0 8rpx;
						}
					}
				}
			}

			.choose-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: rgba(128, 128, 128, 1);
				font-size: 26rpx;
				letter-spacing: 2rpx;
				margin: 30rpx 0 22rpx 0;

				.select-btn {
					width: 110rpx;
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 6rpx;
					background: rgba(65, 136, 239, 1);
					font-size: 24rpx;
					color: #fff;
					text-align: center;
				}

				.selected {
					width: 106rpx;
					height: 46rpx;
					line-height: 46rpx;
					border-radius: 6rpx;
					background: rgba(235, 246, 255, 1);
					border: 2rpx solid rgba(65, 136, 239, 1);
					color: rgba(65, 136, 239, 1);
					font-size: 24rpx;
					text-align: center;
				}
			}

			.company {
				width: calc(100% - 36rpx);
				height: 100rpx;
				border-radius: 6rpx;
				background: rgba(245, 249, 252, 1);
				padding-left: 36rpx;
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
			}

			.company-select {
				width: calc(100% - 40rpx);
				height: 96rpx;
				border-radius: 6rpx;
				background: rgba(245, 249, 252, 1);
				padding-left: 36rpx;
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				border: 2rpx solid rgba(65, 136, 239, 1);
			}

			.name {
				font-size: 28rpx;
				letter-spacing: 2rpx;
				color: rgba(51, 51, 51, 1);
				max-width: calc(100% - 160rpx);
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.name-binding {
				font-size: 28rpx;
				letter-spacing: 2rpx;
				color: rgba(51, 51, 51, 1);
				max-width: calc(100% - 252rpx);
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.scale {
				padding: 4rpx 10rpx;
				border-radius: 4rpx;
				background: linear-gradient(224.81deg, rgba(109, 169, 237, 0.49) 0%, rgba(107, 200, 250, 0.38) 100%);
				font-size: 18rpx;
				letter-spacing: 2rpx;
				color: rgba(65, 136, 239, 1);
				margin-left: 10rpx;
			}

			.isBinding {
				width: 82rpx;
				height: 34rpx;
				line-height: 34rpx;
				text-align: center;
				border-radius: 4rpx;
				background: linear-gradient(217.08deg, rgba(245, 147, 49, 1) 0%, rgba(250, 197, 62, 1) 100%);
				margin-left: 10rpx;
				font-size: 18rpx;
				color: #fff;
				letter-spacing: 2rpx;
			}

			.binding-btn {
				width: 570rpx;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 20rpx;
				background: rgba(65, 136, 239, 1);
				box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.08), 0rpx 2rpx 8rpx rgba(65, 136, 239, 0.25);
				margin: 60rpx auto 0 auto;
				text-align: center;
				font-size: 30rpx;
				letter-spacing: 2rpx;
				color: #fff;
			}

			.binding-none {
				width: 570rpx;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 20rpx;
				background: rgba(65, 136, 239, 0.5);
				box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.08), 0rpx 2rpx 8rpx rgba(65, 136, 239, 0.25);
				margin: 60rpx auto 0 auto;
				text-align: center;
				font-size: 30rpx;
				letter-spacing: 2rpx;
				color: #fff;
			}
		}
	}
</style>